import { Button, Form, Input, Select, Switch, Tooltip } from "antd";
import { useEffect, useState } from "react";
import {
  ISearchOptionsMemberInfo,
  MemberService,
} from "@/popup/services/member";
import { memberInfo } from "@/popup/stores/member";
import { RedoOutlined } from "@ant-design/icons";
import { MemberCard } from "./MemberCard";
import { useUserStore } from "@/popup/stores/user";

export const MemberList = ({refresh}: {refresh: () => void}) => {
  const [form] = Form.useForm();
  const [teamList, setTeamList] = useState<{ label: string; value: number }[]>(
    []
  );
  const [memberList, setMemberList] = useState<memberInfo[]>([]);
  const { userInfo } = useUserStore();

  useEffect(() => {
    // console.log("userInfo?.userInfo?.userId:", userInfo?.userInfo?.userId);
    MemberService.getTeams().then(setTeamList);
    if (userInfo?.userInfo?.userId) {
      MemberService.getSearchOptionsMemberInfo(
        {} as ISearchOptionsMemberInfo,
        userInfo?.userInfo?.userId
      ).then(setMemberList);
    }
  }, [userInfo?.userInfo?.userId]);

  const reset = () => {
    form.resetFields();
  };

  const onFinish = () => {
    form?.validateFields().then(async (values) => {
      const { team, isFavour, name } = values;
      const displayMemberList = await MemberService.getSearchOptionsMemberInfo({
        teamId: team,
        isFavorite: isFavour,
        memberName: name,
      } as ISearchOptionsMemberInfo, userInfo?.userInfo?.userId);
      setMemberList(displayMemberList);
    });
    // 清除当前页面的滚动， 不对呀，应该是清除<div style={{ overflow: "auto", height: "100%", width: "100%" }}> 这个元素的滚动
    const scrollElement = document.querySelector('.member-list-wrapper');
    if (scrollElement) {
      scrollElement.scrollTop = 0;
    }
  };

  return (
    <div className="member-list-wrapper" style={{ overflow: "auto", height: "100%", width: "100%" }}>
      <div
        className="w-full member-list-search-bar"
        style={{
          position: "sticky",
          top: 0,
          left: 0,
          backgroundColor: "#f0f2f5",
          zIndex: 1000,
          paddingBottom: "8px",
        }}
      >
        <Form form={form} layout={"inline"} onFinish={onFinish}>
          <Form.Item label="成员名称" name="name">
            <Input allowClear={true} style={{ width: 120 }} size="small" />
          </Form.Item>
          <Form.Item label="所属队伍" name="team">
            <Select
              allowClear={true}
              options={teamList}
              style={{ width: 135 }}
            />
          </Form.Item>
          <Form.Item label="只看关注" name="isFavour">
            <Switch />
          </Form.Item>
          <Form.Item name="submit">
            <Button style={{ marginTop: '4px'}} type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
          <Form.Item name="reset">
            <Tooltip title="重置">
              <RedoOutlined
                color="blue"
                onClick={reset}
                style={{ cursor: "pointer", marginTop: '4px' }}
              />
            </Tooltip>
          </Form.Item>
          <Form.Item name="refresh">
            <Button style={{ marginTop: '4px'}} type="default" htmlType="button" onClick={refresh}>
              刷新列表
            </Button>
          </Form.Item>
        </Form>
      </div>
      <div
        className="member-card-wrapper"
        style={{
          marginTop: "8px",
          display: "flex",
          flexWrap: "wrap",
          gap: "8px",
        }}
      >
        {memberList?.length > 0 ? (
          memberList.map((item) => {
            if (item?.memberName?.startsWith("TEAM")) {
              return null;
            }
            return <MemberCard info={item} />;
          })
        ) : (
          <div
            style={{
              width: "100%",
              height: "100%",
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            暂无数据
          </div>
        )}
      </div>
    </div>
  );
};
